<template>
  <div class="rtheade">
    <div class="memo">
      <h4>备忘录</h4>
      <p>查阅报表： 销售部汇总查看分析</p>
      <p>查阅报表： 财务部汇总查看分析</p>
    </div>
    <div class="schedule">
      <el-calendar v-model="value" style="width: 100%;">
      </el-calendar>
    </div>
    <div class="counselor">
      <h4>顾问</h4>
      <p><i class="el-icon-mobile-phone"></i>188 8888 8888</p>
      <p><i class="el-icon-message"></i>200200200@qq.com</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    }
  }
};
</script>

<style lang="scss" scoped>
.rtheade {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  box-sizing: border-box;
  height: 100%;

  .memo {
    height: 129px;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 12px;

    box-sizing: border-box;

    h4 {
      font-size: 17.48px;
      color: #3f3f3f;
      margin-bottom: 25px;
      font-weight: bold;
    }

    p {
      font-size: 12px;
      font-weight: 400;
      color: #8d8c8c;
    }
  }

  .schedule {
    flex: 1;
    width: 100%;
    background-color: #fff;
    margin-bottom: 8px;

    .schedule-1 {
      height: 100%;
    }
  }

  .counselor {
    height: 192px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;

    h4 {
      font-size: 17px;
      color: #3F3F3F;
      font-weight: bold;
      margin-bottom: 25px;
    }

    p {

      color: #3F3F3F;
    }

    i {
      padding-right: 15px;
      box-sizing: border-box;
    }
  }
}

.is-selected {
  color: #1989fa;
}

.el-calendar {
  height: 100px;
}

::v-deep .el-calendar__body {
  height: 200px;
}

::v-deep.el-calendar-table {
  height: 300px;
}

.el-calendar-table {
  height: 300px;
}
</style>